<template>
  <section>
    <el-col :span="10" style="padding-top: 10px;margin-left: 10px">
      <el-form :inline="true" size="small">
        <el-form-item>
          <el-input  style="width: 260px;" v-model="keyWords" placeholder='search by Biz Key or Tag, split by ","' clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-tooltip effect="dark" content="when no content,click will refresh table" placement="bottom-start">
            <el-button type="primary" v-on:click="getUrlList()">Search</el-button>
          </el-tooltip>
          <el-button type="primary" v-on:click="addWS()" icon="el-icon-plus">WebService</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!--URL table-->
    <el-table :data="webServices" highlight-current-row v-loading="loading" style="width: 100%;" @selection-change="selsChange">
      <el-table-column type="selection" width="55" header-align="center">
      </el-table-column>
      <el-table-column type="index" width="60" header-align="left">
      </el-table-column>
      <el-table-column prop="bizKey" label="BizKey" header-align="left" width="220" sortable>
        <template slot-scope="props">
          <div v-for="(bizKey,index) in props.row.bizKey">
            <span>{{bizKey.bizKeyType}} : </span>
            <span>{{bizKey.bizKeyValue}} </span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="showUrl" label="URL" width="500" header-align="center" sortable>
      </el-table-column>
      <el-table-column label="Tag" width="200" sortable sort-by="tag" header-align="left">
        <template slot-scope="scope" v-if="scope.row.tag">
          <el-tag size="mini" type="success" >
            {{scope.row.tag}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="type" label="Type" width="100" sortable header-align="left">
      </el-table-column>
      <el-table-column prop="soapMethod" label="SoapMethod" header-align="left" width="380" sortable>
      </el-table-column>
      <el-table-column prop="params" label="Params" min-width="180" sortable >
      </el-table-column>
      <el-table-column label="Operation" width="200" >
        <template slot-scope="scope">
          <el-button size="small" type="text" icon="el-icon-document" v-on:click="handleView(scope.$index,scope.row)">View Response</el-button>
          <el-button size="small" type="text" icon="el-icon-edit" v-on:click="handleEdit(scope.$index,scope.row)">Edit</el-button>
          <el-button size="small" type="text" icon="el-icon-edit-outline" v-on:click="handleCopy(scope.$index,scope.row)">Copy</el-button>
          <el-button type="text" size="small" icon="el-icon-delete" v-on:click="handleDel(scope.$index, scope.row)">Delete</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-col :span="24" align="left">
      <el-button type="danger" v-on:click="batchRemove" size="small" :disabled="this.sels.length===0">Delete Selected</el-button>
      <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="pageSize" :total="total" style="float:right;">
      </el-pagination>
    </el-col>
    <!--Add webservice modal  -->
    <el-dialog :visible.sync="wsAddFormVisible" :title="urlOperationTitle" @close="closeAddForm">
      <el-form :model="webserviceAddForm" label-width="150px" ref="webserviceAddForm" :rules="webserviceAddFormRules">
        <el-form-item  prop="url" label="Url: " style="width: 60%;" size="small">
          <el-input v-model="webserviceAddForm.url" placeholder="url" auto-complete="off" clearable ></el-input>
        </el-form-item>
        <el-form-item prop="type" label="Type: " >
          <el-select v-model="webserviceAddForm.type" placeholder="url type" size="small">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="soapMethod" label="SoapMethod: " v-if="webserviceAddForm.type==='soap'">
          <el-tooltip effect="dark" content="soap method" placement="bottom-start">
            <el-input type="textarea" :autosize="{ minRows: 1, maxRows: 4}" v-model="webserviceAddForm.soapMethod" placeholder="soap method" auto-complete="off" clearable ></el-input>
          </el-tooltip>
        </el-form-item>
        <el-form-item prop="params" label="Params: " v-if="webserviceAddForm.type==='soap'">
          <el-input type="textarea"  :autosize="{ minRows: 1, maxRows: 4}" v-model="webserviceAddForm.params" placeholder="params" auto-complete="off" clearable ></el-input>
          <el-button type="primary" size="mini" v-on:click="parseSoapParams">parse</el-button>
        </el-form-item>
        <el-form-item align="left" size="small">
          <el-button v-on:click="addBizKey('add')" type="primary">add BizKey</el-button>
        </el-form-item>
        <el-row  v-for="(bizKeyType, index) in webserviceAddForm.bizKey">
          <el-col :span="10">
            <el-form-item :label="'BizKey'+(index+1)"  :prop="'bizKey.'+ index + '.bizKeyType'"
                          :rules="{required: true, message: 'At least one Biz Key is required.', trigger: 'blur'}">
              <el-autocomplete
                v-model="bizKeyType.bizKeyType"
                :fetch-suggestions="querySearchBizKeyType"
                size="small"
                auto-complete="on"
                clearable
                placeholder="type"
                v-on:input="lowerBizKey('add',index)"
              ></el-autocomplete>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item :prop="'bizKey.'+ index + '.bizKeyValue'" label-width="10px"
                          :rules="{required: true, message: 'At least one Biz Key is required.', trigger: 'blur'}">
              <el-input size="small" placeholder="value" v-model="bizKeyType.bizKeyValue" auto-complete="off" clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-button style="margin-left:20px;margin-top:2px" type="danger" @click.prevent="removeBizKey('add',bizKeyType)" icon="el-icon-delete" size="small">Delete BizKey</el-button>
          </el-col>
        </el-row>
        <el-form-item align="left" size="small" >
          <el-button v-on:click="callWS('add')" type="primary" v-bind:disabled = 'checkAddForm'>Call Web Service in:</el-button>
          <el-select v-model="webserviceAddForm.env" placeholder="QA3" style="width:20%">
            <el-option
              v-for="item in envs"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="responseData" label="ResponseData: ">
          <el-button type="info" size="mini" v-on:click="removeHeader">remove header</el-button>
          <el-input type="textarea" :autosize="{ minRows: 1, maxRows: 5}" auto-complete="off" placeholder="response" v-model="webserviceAddForm.responseData" clearable></el-input>
        </el-form-item>
        <el-form-item  prop="tag" label="Tag: " style="width: 40%;" size="small">
          <el-input v-model.trim="webserviceAddForm.tag" placeholder="Please input a tag" auto-complete="off" clearable ></el-input>
        </el-form-item>
        <el-form-item align="left" size="small">
          <el-button type="primary" v-on:click="submitAddWebService" >Submit</el-button>
          <el-button v-on:click="resetAddForm()" type="warning">Reset</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!--Edit webservice modal -->
    <el-dialog :visible.sync="wsEditFormVisible" :title="urlOperationTitle" >
      <el-form :model="webserviceEditForm" label-width="150px" ref="webserviceEditForm" :rules="webserviceEditFormRules">
        <el-form-item prop="url" label="Url: " style="width: 60%;" size="small">
          <el-input @change="checkUrl" v-model="webserviceEditForm.url" placeholder="url" auto-complete="off" clearable ></el-input>
        </el-form-item>
        <el-form-item prop="type" label="Type: " >
          <div align="left">
            <el-select v-model="webserviceEditForm.type" placeholder="url type" size="small">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
        </el-form-item>
        <el-form-item prop="soapMethod" label="SoapMethod: " v-if="webserviceEditForm.type==='soap'">
          <el-tooltip effect="dark" content="soap method" placement="bottom-start">
            <el-input type="textarea" :autosize="{ minRows: 1, maxRows: 4}" v-model="webserviceEditForm.soapMethod" placeholder="soap method" auto-complete="off" clearable ></el-input>
          </el-tooltip>
        </el-form-item>
        <el-form-item prop="params" label="Params: " v-if="webserviceEditForm.type==='soap'">
          <el-input type="textarea"  :autosize="{ minRows: 1, maxRows: 4}" v-model="webserviceEditForm.params" placeholder="params" auto-complete="off" clearable ></el-input>
        </el-form-item>
        <el-form-item align="left" size="small">
          <el-button v-on:click="addBizKey('edit')" type="primary">add BizKey</el-button>
        </el-form-item>
        <el-row  v-for="(bizKeyType, index) in webserviceEditForm.bizKey">
          <el-col :span="10">
            <el-form-item :label="'BizKey'+(index+1)"  :prop="'bizKey.'+ index + '.bizKeyType'"
                          :rules="{required: true, message: 'At least one Biz Key is required.', trigger: 'blur'}">
              <el-autocomplete
                v-model="bizKeyType.bizKeyType"
                :fetch-suggestions="querySearchBizKeyType"
                size="small"
                auto-complete="on"
                clearable
                placeholder="type"
                v-on:input="lowerBizKey('edit', index)"
              ></el-autocomplete>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item :prop="'bizKey.'+ index + '.bizKeyValue'" label-width="10px"
                          :rules="{required: true, message: 'At least one Biz Key is required.', trigger: 'blur'}">
              <el-input size="small" placeholder="value" v-model="bizKeyType.bizKeyValue" auto-complete="off" clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-button style="margin-left:20px;margin-top:2px" type="danger" @click.prevent="removeBizKey('edit',bizKeyType)" icon="el-icon-delete" size="small">Delete BizKey</el-button>
          </el-col>
        </el-row>
        <el-form-item align="left" size="small">
          <el-button v-on:click="callWS('edit')" type="primary" v-bind:disabled = 'checkEditForm'>Call Web Service in:</el-button>
          <el-select v-model="webserviceEditForm.env" placeholder="QA3" style="width:20%">
            <el-option
              v-for="item in envs"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="responseData" label="ResponseData: ">
          <el-button type="info" size="mini" v-on:click="removeHeader">remove header</el-button>
          <el-input type="textarea" :autosize="{ minRows: 1, maxRows: 5}" auto-complete="off" placeholder="response" v-model="webserviceEditForm.responseData" clearable></el-input>
        </el-form-item>
        <el-form-item  prop="tag" label="Tag: " style="width: 40%;" size="small">
          <el-input v-model.trim="webserviceEditForm.tag" placeholder="Please input a tag" auto-complete="off" clearable ></el-input>
        </el-form-item>
        <el-form-item align="left" size="small">
          <el-button type="primary" v-on:click="submitEditWebService" :disabled="editSubmitButton" >Submit</el-button>
          <el-button v-on:click="resetEditForm()" type="warning">Reset</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!--view response data -->
    <el-dialog title="View Response XML"
               :visible.sync="viewResponseModal"
               effect="fade" width="50%"
               backdrop="true"
               :close-on-click-modal="false">
      <el-card style="background-color:#b6bfab">
        <div style="text-align:left"><span>{{responseData}}</span></div>
      </el-card >
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" class="btn btn-default" v-on:click="closeView()">OK</el-button>
      </div>
    </el-dialog>

  </section>

</template>

<script>
  /* eslint-disable */
  export  default{
    data(){
      let checkUrl = (rule, value,callback)=> {
        if (!value) {
          callback(new Error('please input url'));
        } else {
          let url = 'urls/url';
          this.$http.post(url,{params:{url:value}}).then((res)=> {
            if (res.body.data) {
              callback(new Error('sorry, the url already exist , please input again!'));
            }
            else if (res.body.status === '400') {
              this.$message({
                message: res.body.reason,
                type: 'error'
              })
            }
            else {
              callback();
            }
          })
        }
      };
      return{
        sels: [],
        keyWords:'',
        urlOperationTitle:'',
        editUrlOriginalName:'',
        bizKeyOriginalValue:'',
        editSubmitButton:false,
        loading:false,
        pageSize:20,
        total:0,
        page:1,
        bizKeyTypeList:[],
        webServices:[{
          url:'',
          bizKey: [{
            bizKeyType: '',
            bizKeyValue: ''
          }],
          responseData:'',
          soapMethod:'',
          params:'',
          tag:'',
          type:''
        }],
        options:[{
          value:'restful',
          label:'restful'
        },{
          value:'soap',
          label:'soap'
        }],
        envs:[{
          value:'http://irisbackendqa1.oocl.com',
          label:'QA1'
        },{
          value:'http://irisbackendqa2.oocl.com',
          label:'QA2'
        },{
          value:'http://irisbackendqa3.oocl.com',
          label:'QA3'
        },{
          value:'http://irisbackendqa4.oocl.com',
          label:'QA4'
        }],
        webserviceAddForm:{
          url:'',
          bizKey: [{
            bizKeyType: '',
            bizKeyValue: ''
          }],
          responseData:'',
          soapMethod:'',
          params:'',
          tag:'',
          env:'',
          type:''
        },
        webserviceEditForm:{
          url:'',
          bizKey:[{
            bizKeyType: '',
            bizKeyValue: ''
          }],
          responseData:'',
          soapMethod:'',
          params:'',
          tag:'',
          env:'',
          type:''
        },
        currentEditIndex: 0,
        wsAddFormVisible:false,
        wsEditFormVisible:false,
        responseData:'',
        viewResponseModal:false,
        webserviceAddFormRules:{
          url:[{
            required: true, trigger: 'blur'
          }],
          bizKey:[{
            required: true, message: 'please input BizKey', trigger: 'blur'
          }],
          type:[{
            required: true, message: 'please input Type', trigger: 'blur'
          }],
          responseData:[{
            required: true, message: 'please input Response Data', trigger: 'blur'
          }],
        },
        webserviceEditFormRules:{
          url:[{
            required: true, trigger: 'blur'
          }],
          bizKey:[{
            required: true, message: 'please input BizKey', trigger: 'blur'
          }],
          type:[{
            required: true, message: 'please input Type', trigger: 'blur'
          }],
          responseData:[{
            required: true, message: 'please input Response Data', trigger: 'blur'
          }],
        },
      }
    },
    computed:{
      checkAddForm:function(){
        let isUrlExist = this.webserviceAddForm.url ? false: true;
        let existEmptyKey = this.webserviceAddForm.bizKey.filter(function (item){
          return item.bizKeyType === '' || item.bizKeyValue === '';
        }).length > 0;
        return isUrlExist || existEmptyKey;
      },
      checkEditForm:function(){
        let isUrlExist = this.webserviceEditForm.url ? false: true;
        let existEmptyKey = this.webserviceEditForm.bizKey.filter(function (item){
          return item.bizKeyType === '' || item.bizKeyValue === '';
        }).length > 0;
        return isUrlExist || existEmptyKey;
      }
    },
    methods:{
      handleView: function (index,row) {
        this.responseData = row.showResponseData;
        this.viewResponseModal=true;
      },
      handleDel: function (index,row) {
        this.$confirm('are you sure?', 'warning', {
          type: 'warning'
        }).then(() => {
          this.loading = true;
          let targetUrl = this.webServices[index].url;
          let url = 'urls/singleRemove';
          this.$http.post(url,{
            params:targetUrl
          }).then((res)=>{
            if(res.body.status==='400'){
              this.$message({
                message: 'delete fail : ' + res.body.reason,
                type: 'error'
              });
            } else {
              this.loading = false;
              this.$message({
                message: 'delete success',
                type: 'success'
              });
              this.getUrlList();
            }

          })
        });
      },
      handleEdit: function (index,row) {
        this.urlOperationTitle='Edit Url';
        this.wsEditFormVisible = true;
        this.webserviceEditForm = this.copyWebServiceObject(row);
        this.webserviceEditForm.env = "";
        this.currentEditIndex = index;
        this.editUrlOriginalName = row.url;
      },
      copyWebServiceObject: function(row) {
        let newOne= Object.assign({}, row);
        newOne.bizKey = [];
        row.bizKey.forEach(function(item) {
          newOne.bizKey.push({
            bizKeyType:item.bizKeyType,
            bizKeyValue:item.bizKeyValue
          });
        });
        return newOne;
      },
      handleCopy: function (index,row) {
        this.urlOperationTitle='Add Url';
        this.bizKeyOriginalValue = row.bizKey;
        this.wsAddFormVisible = true;
        this.webserviceAddForm = Object.assign({}, row);
      },
      addWS: function () {
        this.urlOperationTitle='Add Url';
        this.wsAddFormVisible = true;
      },
      closeView: function (){
        this.viewResponseModal=false;
      },
      closeAddForm: function () {
        this.webserviceAddForm = {url:'',
          bizKey: [{
            bizKeyType: '',
            bizKeyValue: ''
          }],
          responseData:'',
          soapMethod:'',
          params:'',
          env:'',
          type:''};
        this.resetAddForm();
      },
      submitAddWebService: function () {
        this.$refs.webserviceAddForm.validate((valid)=>{
          if(valid){
            this.$confirm('Are you sure', 'Tip', {}).then(res=>{

              this.loading=true;
              this.addBizKeyType('edit');
              let para = Object.assign({}, this.webserviceAddForm);
              let url = 'urls/add';
              this.$http.post(url,{params:para}).then(res=>{
                if(res.body.status === '400'){
                  this.$message({
                    type:'error',
                    message:res.body.reason
                  })
                } else {
                  this.$message({
                    type:'success',
                    message:'Add Url submit success'
                  });
                  this.$refs.webserviceAddForm.resetFields();
                  this.wsAddFormVisible = false;
                  this.getUrlList();
                }
              })
            })
          }
        })
      },
      submitEditWebService: function () {
        this.$refs.webserviceEditForm.validate((valid)=>{
          if(valid){
            this.$confirm('Are you sure', 'Tip', {}).then(res=>{
              this.loading=true;
              this.addBizKeyType('edit');
              let para = Object.assign({}, this.webserviceEditForm);
              let url = 'urls/edit';
              this.$http.put(url,{params:para}).then(res=>{
                if(res.body.status === '400'){
                  this.$message({
                    type:'error',
                    message:res.body.reason
                  })
                } else {
                  this.$message({
                    type:'success',
                    message:'Edit Url submit success'
                  });
                  this.$refs.webserviceEditForm.resetFields();
                  this.wsEditFormVisible = false;
                  this.getUrlList();
                }
              })
            })
          }
        })
      },
      resetAddForm: function () {
        this.$nextTick(() => {
          this.$refs.webserviceAddForm.resetFields();
        });
      },
      resetEditForm: function () {
        this.webserviceEditForm = this.copyWebServiceObject(this.webServices[this.currentEditIndex]);
      },
      getUrlListHttp: function (url) {
        this.loading = true;
        this.$http.get(url).then(res=>{
          if(res.body.status==='400'){
            this.$message({
              type:'error',
              message:res.body.reason
            })
          } else {
            this.webServices =  res.body.data;
            var me = this;
            this.webServices.forEach(function(item) {
              item.showUrl = me.replaceSourceDateWithKeyValueByKey(item.url, item.bizKey);
              item.showResponseData = me.replaceSourceDateWithKeyValueByKey(item.responseData, item.bizKey);
            });
            this.total = res.body.total;
            this.loading = false;
          }
        })
      },
      getUrlList: function () {
        this.keyWords = this.trimWords(this.keyWords);
        if(this.keyWords){
          let url = 'urls/FilterUrlList/'+this.keyWords+'/'+this.page+'/'+this.pageSize;
          this.getUrlListHttp(url);
        } else {
          let url = 'urls/urlPageList/'+this.page+'/'+this.pageSize;
          this.getUrlListHttp(url);
        }
      },
      trimWords : function (words) {
        let wordList = words.split(',');
        let rtn = '';
        wordList.forEach(function (word) {
          rtn +=  word.trim() ?  word.trim() + ',' : ''
        });
        return rtn.substring(0,rtn.length-1);
      },
      handleCurrentChange: function (val) {
        this.page = val;
        this.getUrlList();
      },
      parseSoapParams: function () {
        let url = 'urls/parseSoapRequestBody'
        this.$http.post(url,{originalrequestXML:this.webserviceAddForm.params}).then(res=>{
          if(res.body.status==='500'){
            this.$message({
              type:'error',
              message:res.body.message
            })
          } else {
            this.webserviceAddForm.params = JSON.stringify(res.body.data);
          }
        })
      },
      checkUrl: function (value) {
        if(value!==this.editUrlOriginalName){
          let url = 'urls/url';
          this.$http.post(url,{params:{url:value}}).then((res)=> {
            if (res.body.status === '200') {
              this.$message({
                message: 'sorry, the url already exist , please input another one!',
                type: 'error'
              })
              this.editSubmitButton = true;
            } else {
              this.editSubmitButton = false;
            }
          })
        }
      },
      removeHeader: function () {
        let header = 'This XML file does not appear to have any style information associated with it. The document tree is shown below.\n';
        if(this.urlOperationTitle==='Add Url'){
          this.webserviceAddForm.responseData=this.webserviceAddForm.responseData.replace(header,'');
        } else {
          this.webserviceEditForm.responseData=this.webserviceEditForm.responseData.replace(header,'');
        }
      },
      batchRemove :function(){
        let urlIds = this.sels.map(item => item._id).toString();
        this.$confirm('are you sure???', 'Tip', {
          type: 'warning'
        }).then(() => {
          let url = 'urls/batchremove/'+urlIds;
          this.listLoading = true;
          this.$http.delete(url).then(res=>{
            this.listLoading = false;
            this.$message({
              message: 'delete success',
              type: 'success'
            });
            this.getUrlList();
          })
        }).catch((e) => {
          this.$message({
            type: 'error',
            message: e
          })
        })
      },
      selsChange: function (sels) {
        this.sels = sels;
      },
      callWSForWebserviceAutoInputResponse: function (webserviceForm) {
        let targetUrl = this.replaceSpecialChar((webserviceForm.env ? webserviceForm.env : this.envs[2].value) +  webserviceForm.url);
        targetUrl = this.replaceSourceDateWithKeyValueByKey(targetUrl, webserviceForm.bizKey);
        var me = this;
        webserviceForm.responseData = '';
        let callingMessage = this.$message({
          message:'Calling...',
          duration:0
        });
        this.$http.get('/ws/responseData/' + targetUrl).then(res => {
          let body = JSON.parse(res.bodyText);
          callingMessage.close();
          if(body.status===200){
            webserviceForm.responseData = me.replaceSourceDateWithKeyValueByValue(body.data, webserviceForm.bizKey);
          } else {
            this.$message({
              message:body.status+' : ' + body.data,
              type:'error'
            })
          }
        }).catch(res=>{
          let body = JSON.parse(res.bodyText)
          this.$message({
            message:body.status+' : ' + body.data,
            type:'error'
          })
        })
      },
      callWS: function (webserviceForm) {
        if(webserviceForm==='add') {
          this.callWSForWebserviceAutoInputResponse(this.webserviceAddForm);
        } else {
          this.callWSForWebserviceAutoInputResponse(this.webserviceEditForm);
        }
      },
      addBizKeyForWebservice:function (webserviceForm) {
        webserviceForm.bizKey.push({
          bizKeyType: '',
          bizKeyValue: ''
        })
      },
      removeBizKeyForWebservice: function (webserviceForm, item) {
        if (webserviceForm.bizKey.length <= 1) {
          this.$message({
            message : 'At least one Biz Key is required.',
            type : 'error'
          });
        } else {
          let index = webserviceForm.bizKey.indexOf(item)
          if (index !== -1) {
            webserviceForm.bizKey.splice(index, 1)
          }
        }
      },
      addBizKey:function (webserviceForm) {
        if(webserviceForm==='add') {
          this.addBizKeyForWebservice(this.webserviceAddForm);
        } else {
          this.addBizKeyForWebservice(this.webserviceEditForm);
        }
      },
      removeBizKey:function (webserviceForm, item) {
        if(webserviceForm==='add') {
          this.removeBizKeyForWebservice(this.webserviceAddForm, item);
        } else {
          this.removeBizKeyForWebservice(this.webserviceEditForm, item);
        }
      },
      querySearchBizKeyType: function (queryString, callback) {
        let bizKeyTypeList = this.bizKeyTypeList;
        let results = queryString ? bizKeyTypeList.filter(this.createFilter(queryString)) : bizKeyTypeList;
        callback(results);
      },
      createFilter: function (queryString) {
        return (option) => {
          return (option.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1);
        };
      },
      getBizKeyTypeList: function () {
        let url = 'bizKey/getAllBizTypes';
        this.$http.get(url).then(res => {
          if (res.body.status !== '200') {
            this.$message({
              type: 'error',
              message: res.body.reason
            })
          } else {
            this.bizKeyTypeList = [];
            for (let i = 0; i < res.body.data.length; i++) {
              this.bizKeyTypeList.push({
                value: res.body.data[i].type
              });
            }
          }
        })
      },
      addBizKeyType:function (webserviceForm) {
        if(webserviceForm==='add') {
          this.addBizKeyTypeForWebservice(this.webserviceAddForm);
        } else {
          this.addBizKeyTypeForWebservice(this.webserviceEditForm);
        }
      },
      addBizKeyTypeForWebservice: function (webServiceForm) {
        let url = 'bizKey/addBizKeyType';
        this.$http.post(url, {params: webServiceForm.bizKey}).then((res) => {
          if (res.body.status === '400') {
            this.$message({
              type: 'error',
              message: res.body.reason
            })
          } else {
            this.$message({
              message: 'Add bizKey type success!',
              type: 'success'
            });
          }
        })
      },
      replaceSourceDateWithKeyValueByKey: function (data, bizKeys) {
        if(!data || !bizKeys){
          return ;
        }
        bizKeys.forEach(function (bizKey) {
          if(bizKey.bizKeyType === '') {
            return;
          }
          var res = "@" + bizKey.bizKeyType + "@";
          data = data.replace(new RegExp(res, 'g'), bizKey.bizKeyValue);
        }, this);
        return data;
      },
      replaceSourceDateWithKeyValueByValue: function (data, bizKeys) {
        if(!data || !bizKeys){
          return ;
        }
        bizKeys.forEach(function (bizKey) {
          if(bizKey.bizKeyType === '') {
            return;
          }
          var res = "@" + bizKey.bizKeyType + "@";
          data = data.replace(new RegExp(bizKey.bizKeyValue, 'g'), res);
        }, this);
        return data;
      },
      lowerBizKeyForWebservice: function (webserviceForm, index) {
        webserviceForm.bizKey[index].bizKeyType = webserviceForm.bizKey[index].bizKeyType.toLocaleLowerCase();
      },
      lowerBizKey:function (webserviceForm, index) {
        if(webserviceForm==='add') {
          this.lowerBizKeyForWebservice(this.webserviceAddForm, index);
        } else {
          this.lowerBizKeyForWebservice(this.webserviceEditForm, index);
        }
      },
      replaceSpecialChar: function(str) {
        let result = escape(str);
        return result.replace(new RegExp('/','g'),'%2f');
      }
    },
    mounted(){
    },
    created(){
      this.getUrlList();
      this.getBizKeyTypeList();
    }
  }
</script>
